<template>
  <van-popup
    v-model="showPicker"
    position="bottom"
    :close-on-click-overlay="false"
    @click-overlay="closePick"
  >
    <van-picker
      show-toolbar
      :value-key="valueKey"
      :columns="options"
      @cancel="closePick"
      @confirm="onConfirmSelect"
    />
  </van-popup>
</template>

<script>
export default {
  name: 'qt-common-picker',

  props: {
    valueKey: String,

    showPicker: {
      type: Boolean,
      default: false,
    },

    options: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  methods: {
    closePick() {
      this.$emit('update:showPicker', false);
    },

    onConfirmSelect(value) {
      this.$emit('change', value);
      this.closePick();
    },
  },
};
</script>
